import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

const MobileNavbar: React.FC = () => {
  const location = useLocation();
  const { isAuthenticated } = useAuth();

  const isActive = (path: string) => {
    return location.pathname === path;
  };

  return (
    <nav className="fixed bottom-0 left-0 right-0 z-50 bg-black border-t border-gray-800 md:hidden">
      <div className="flex justify-around items-center h-16 px-2">
        {/* 首页 */}
        <Link 
          to="/" 
          className={`flex flex-col items-center justify-center flex-1 h-full ${
            isActive('/') ? 'text-white' : 'text-gray-400'
          }`}
        >
          <svg className="w-6 h-6 mb-1" fill="currentColor" viewBox="0 0 24 24">
            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
          </svg>
          <span className="text-xs">首页</span>
        </Link>

        {/* 关注 */}
        <Link 
          to="/following" 
          className={`flex flex-col items-center justify-center flex-1 h-full ${
            isActive('/following') ? 'text-white' : 'text-gray-400'
          }`}
        >
          <svg className="w-6 h-6 mb-1" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
          <span className="text-xs">关注</span>
        </Link>

        {/* 发布按钮 - 居中突出显示 */}
        <Link 
          to="/upload" 
          className="flex flex-col items-center justify-center flex-1 h-full"
        >
          <div className="w-12 h-12 bg-gradient-to-r from-red-500 to-pink-500 rounded-full flex items-center justify-center mb-1">
            <svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
              <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
            </svg>
          </div>
          <span className="text-xs text-gray-400">发布</span>
        </Link>

        {/* 消息 */}
        <Link 
          to="/messages" 
          className={`flex flex-col items-center justify-center flex-1 h-full ${
            isActive('/messages') ? 'text-white' : 'text-gray-400'
          }`}
        >
          <svg className="w-6 h-6 mb-1" fill="currentColor" viewBox="0 0 24 24">
            <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/>
          </svg>
          <span className="text-xs">消息</span>
        </Link>

        {/* 我的 */}
        <Link 
          to={isAuthenticated ? "/profile" : "/login"} 
          className={`flex flex-col items-center justify-center flex-1 h-full ${
            isActive('/profile') || isActive('/login') ? 'text-white' : 'text-gray-400'
          }`}
        >
          <svg className="w-6 h-6 mb-1" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
          </svg>
          <span className="text-xs">{isAuthenticated ? '我的' : '登录'}</span>
        </Link>
      </div>
    </nav>
  );
};

export default MobileNavbar; 